<template>
  <view class="animated fadeIn faster m-2" style="min-height: 100vh;">
    <view class="searchBox px-2 rounded20 d-flex-item d-flex d-flex-middle bg-fff">
      <input v-model="formData.name" class="pl-1 rounded10 font30 d-flex-item" placeholder="搜索课程"
             placeholder-class="colorhold"/>
      <text v-if="formData.name" class="text-right iconfont icon-jiufuqianbaoicon08 main-color ml-1"
            @click="dataCancel"></text>
      <text class="iconfont icon-icon_sousuo main-color font40  text"></text>
    </view>

    <!-- 课程列表 -->
    <view class="course-list mt-3">
      <view
          v-for="(course, index) in courseList"
          :key="index"
          class="course-item bg-fff rounded10 mb-2 p-2"
      >
        <view class="d-flex">
          <!-- 左侧课程封面 -->
          <view class="course-cover mr-2">
            <image
                :src="course.cover"
                mode="aspectFill" style="width: 200rpx; height: 150rpx; border-radius: 10rpx;"
            ></image>
          </view>

          <!-- 右侧课程信息 -->
          <view class="course-info d-flex-item">
            <view class="course-title font30 font-bold mb-1">{{ course.title }}</view>
            <view class="course-teacher color-92 font24 mb-1">
              <text>{{ course.teacher }}</text>
              <text class="ml-3">{{ course.isTeacher }}</text>
            </view>
            <view class="d-flex d-flex-between d-flex-middle">
              <view class="course-progress color-92 font24">
                <text>{{ course.progress }}</text>
              </view>
              <view>
                <view
                    class="study-btn font20"
                    :class="course.status === '已完成' ? 'completed-btn' : 'continue-btn'"
                    @click="goToStudy(course)"
                >
                  {{ course.status === '已完成' ? '重新学习' : '去学习' }}
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {userApi} from '@/http/userApi.js';
import {fileApi} from '@/http/fileApi.js';
import store from '@/store/index.js';
import {USER_TOKEN} from '@/constants/local-storage-key-const';
import {mapState} from "vuex"

export default {
  data() {
    return {
      formData: {
        name: ''
      },
      courseList: [
        {
          id: 1,
          cover: 'https://cdn.lubanschool.cn/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20230801133335-20230801133524.png',
          title: '课程名称课程名称',
          teacher: '75课时',
          isTeacher: '已听34课时',
          progress: '2025.9.7—2025.9.8',
          status: '学习中'
        },
        {
          id: 2,
          cover: 'https://cdn.lubanschool.cn/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20230801133335-20230801133524.png',
          title: '课程名称课程名称',
          teacher: '75课时',
          isTeacher: '已听34课时',
          progress: '2025.9.7—2025.9.8',
          status: '已完成'
        }
      ]
    }
  },
  methods: {
    goToStudy(course) {
      // 跳转到学习页面
      uni.navigateTo({
        url: `/subPages/courseDetails/courseDetails?id=${course.id}`
      });
    }
  }
}
</script>

<style scoped>
.searchBox {
  background-color: #fff;
  height: 80rpx;
  line-height: 80rpx;
}

.searchBox input {
  height: 100%;
}

.study-btn {
  padding: 10rpx 20rpx;
  border-radius: 30rpx;
  height: auto;
  line-height: 1;
}

.continue-btn {
  color: #3E8EFF;
  border: 1rpx solid #3E8EFF;
}

.completed-btn {
  color: #666;
  border: 1rpx solid #ddd;
}

</style>
